<script setup lang="ts">
import { useOperator } from "./hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

defineOptions({
  name: "LoginLog",
});

const {
  loading,
  columns,
  dataList,
  reload,
  load,
  btnDisable,
  btnName,
  kickoutUser,
} = useOperator();
</script>

<template>
  <div class="main">
    <PureTableBar title="当前在线" @refresh="reload">
      <template #buttons />
      <template v-slot="{ size, checkList }">
        <pure-table
          border
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="columns"
          :checkList="checkList"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)',
          }"
        >
          <template #operation="{ row }">
            <el-popconfirm
              title="是否确定将此账号踢下线吗?"
              @confirm="kickoutUser(row)"
            >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon('game-icons:boot-kick')"
                >
                  踢出
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </pure-table>
        <el-button
          class="mt-4"
          style="width: 100%"
          @click="load"
          :disabled="btnDisable"
        >
          {{ btnName }}
        </el-button>
      </template>
    </PureTableBar>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
